<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模拟用户操作</title>
    <script src="./jquery1.11.3.js"></script>
    <script>
        $(function () {
            //第一种方法:
            // $('input').click(function () {
            //     alert("点击按钮");
            // });
            // $('input').trigger('click');//当点击chrome执行的时候模拟用户点击 如果我们在的点击的话也会出现alert("点击按钮");
            //第二种方法:
            // $('input').click(function () {
            //     alert("abc");
            // }).trigger('click');

            // $('input').click(function (event,v1,v2,v3,v4) {// v1 第一个参数 v2第二个参数
            //     alert(v1+":"+v2+":"+v3[3]+":"+v4.user);

            //下面的[]不表示数组 表示参数 如果有多个参数 一定要用中括号括起来[]
            // }).trigger('click',[123,'efg',[1,2,4,5,6],{'user':'xiaomao'}]);
            // $('input').bind('click','lilei',function (event,v1,v2,v3,v4) {// v1 第一个参数 v2第二个参数
            //     alert(v1+":"+v2+":"+v3[3]+":"+v4.user+":"+event.data);
            // }).trigger('click',[123,'efg',[1,2,4,5,6],{'user':'xiaomao'}]);//返回结果123:efg:5:xiaomao:lilei

            //自定义事件 第一种方法
            // $('input').bind('testEvent',function () {
            //     alert("888");
            // }).trigger('testEvent');
            //第二种方法:
            // $('input').bind('testEvent',function () {
            //     alert("888");
            // }).triggerHandler('testEvent');


            // $('form').trigger('submit');//模拟用户提交
            // $('form').triggerHandler('submit');//模拟用户提交的过程中 取消默认跳转

            // $('input').bind('click',function () {
            //     alert("999");
            // }).trigger('click');//模拟了3次click事件
            // $('input').bind('click',function () {
            //     alert("999");
            // }).triggerHandler('click');//模拟了1次click事件

            // $('input').bind('click',function () {
            //     alert("999");
            // }).trigger('click').css('color','red');
           // alert( $('input').bind('click',function () {
           //     return 123;
           //  }).triggerHandler('click'));//返回123


            // $('div').bind('testEvent',function () {
            //     alert('event');
            //      });
            // $('.d3').trigger('testEvent'); //弹出event 3次
            // $('.d3').triggerHandler('testEvent');//弹出event 1次


            // $('input').bind('click.123',function () {
            //     alert("123");
            // });
            // $('input').bind('click.abc',function () {
            //     alert("abc");
            // });
            // $('input').unbind('click.abc');//删除了click.abc



        $('input').bind('click.123',function () {
            alert("123");
        });
        $('input').bind('click.abc',function () {
            alert("abc");
        });
        $('input').bind('mouseover.abc',function () {
            alert("abc");
        });
        $('input').unbind('.abc');//删除了click.abc和mouseover.abc


        });
    </script>
</head>
<body>
<!--    <input type="button" value="button">-->
<!--<form action="test.html">-->
<!--    <input type="submit" value="sumit">-->
<!--</form>-->
<input type="button" value="button">
<input type="button" value="button">
<input type="button" value="button">
<div class="d1">
    <div class="d2">
        <div class="d3">div</div>
    </div>
</div>
    <script>
        /*模拟用户操作
       一. //当点击chrome执行的时候模拟用户点击 如果我们在的点击的话也会出现alert("点击按钮");
             //第一种方法:
                     $('input').click(function () {
                        alert("点击按钮");
                        });
                    $('input').trigger('click');
            //第二种方法:
                      $('input').click(function () {
                         alert("abc");
                        }).trigger('click');
            传递参数
            "$('input').bind('click','lilei',function (event,v1,v2,v3,v4) {
                alert(v1+"":""+v2+"":""+v3[3]+"":""+v4.user+"":""+event.data);
            }).trigger('click',[123,'efg',[1,2,4,5,6],{'user':'xiaomao'}]);"

        二 自定义事件 第一种方法:
                        $('input').bind('testEvent',function () {
                            alert("888");
                         }).trigger('testEvent');
                     第二种方法:triggerHandler 可以阻止默认行为的产生
                                $('input').bind('testEvent',function () {
                                    alert("888");
                                }).triggerHandler('testEvent');
           trigger 和triggerHandler区别
                    第一个区别: 1.trigger 模拟用户提交 默认行为也一并触发 定位到action属性了
                               2.triggerHandler模拟用户提交 默认行为取消 如果点击submit按钮 也会出现默认的行为 没有定位到action属性
                    第二个区别:1.trigger 模拟用户 可以影响到整个页面的元素
                                     例子: $('input').bind('click',function () {
                                            alert("999");
                                          }).trigger('click');//模拟了3次click事件
                              2.triggerHandler 模拟用户  只能影响一个元素
                                    例子: $('input').bind('click',function () {
                                               alert("999");
                                            }).triggerHandler('click');//模拟了1次click事件
                    第三个区别 1.trigger 返回值是jquery对象 可以对其在进行修改
                                 $('input').bind('click',function () {
                                    alert("999");
                                    }).trigger('click').css('color','red');

                             2. triggerHandler 返回值是事件的名称 如果没有任何的返回值 则返回undefined
                              alert( $('input').bind('click',function () {
                                    return 123;
                                }).triggerHandler('click'));//返回123
                  第四个区别  1. trigger 不会阻止事件冒泡
                                    $('div').bind('testEvent',function () {
                                        alert('event');
                                         });
                                     $('.d3').trigger('testEvent'); //弹出event 3次
                              2.triggerHandler 阻止事件冒泡的功能
                                     $('div').bind('testEvent',function () {
                                             alert('event');
                                         });
            三.命名空间 为多个click事件起一个别名  即click后面写名称
                        $('input').bind('click.123',function () {
                            alert("123");
                            });
                        $('input').bind('click.abc',function () {
                             alert("abc");
                            });
                        $('input').unbind('click.abc');//删除了click.abc
        * */
    </script>
</body>
</html>